<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>职位薪资调整</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
<el-row>
    <el-col :span="5">
        <el-select v-model="pname" size="mini" placeholder="请选择">
            <el-option
                    v-for="item in positions"
                    :key="item.pname"
                    :label="item.pname"
                    :value="item.pname">
            </el-option>
        </el-select>
    </el-col>
    <el-col :span="5"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
</el-row>
<el-row>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column v-if="show" prop="id" label="id"></el-table-column>
        <el-table-column prop="pid" label="职位ID"></el-table-column>
        <el-table-column prop="pname" label="职位名称"></el-table-column>
        <el-table-column prop="sal" label="基本工资"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="toEdit(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</el-row>
<el-row>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</el-row>



<el-row>
    <!--编辑模态框-->
    <el-dialog title="编辑" :visible.sync="editFormVisible">
        <el-form :model="form">
            <el-form-item v-if='show' label="id" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位ID" :label-width="formLabelWidth">
                <el-input v-model="form.pid" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位名称" :label-width="formLabelWidth">
                <el-input v-model="form.pname" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资" :label-width="formLabelWidth">
                <el-input-number v-model="form.sal" @change="handleChange" :min="1" :max="100000" label="工资"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">更 新</el-button>
        </div>
    </el-dialog>
</el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:20,
            pname:null,
            editFormVisible:false,//更新对话框是否显示
            form:{},//添加或者更新form
            formLabelWidth:"120px",
            positions:[]//职位
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                //请求到职位
                axios.post('/sal/positions').then(function (response) {
                    _this.newstypes = response.data.list;
                })
                axios.get('/sal/salPage', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        pname:this.pname
                    }
                }).then(function (response) {
                    //赋值分页列表
                    _this.tableData = response.data.list;
                    //删除最后一页为空时，调到上一页
                    //alert(_this.tableData.length);
                    if(_this.tableData.length==0&&_this.currentPage!=1){
                        _this.currentPage=_this.currentPage-1;
                        _this.loadData();
                    }
                    //赋值总条数
                    _this.total = response.data.total;
                })
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                this.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                this.currentPage=v;
                this.loadData();
            },
            // 搜索方法
            search:function () {
                this.currentPage=1;
                this.loadData();
            },
            //打开模态框
            toEdit:function (id) {
                this.form={};
                if (id>0){
                    //请求当前行newsid的数据
                    axios.post('/sal/salOne?id='+id).then(function (response) {
                        _this.form = response.data.list;
                    })
                }
                this.editFormVisible=true;
            },
            //更新
            update:function(){
                //JSON.stringify JSON 转 String？？？
                //alert(JSON.stringify(this.form));
                axios.post('/sal/updateSal',this.form).then(function (response) {
                    if(response.data == 1){
                        //提示成功
                        _this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    _this.$message.error("更新失败");
                });
            }
        }
    });
</script>
</body>
</html>